<template>
  <div id="app">
    <keep-alive :include="keepAlive">
      <router-view :key="key" />
    </keep-alive>
    <van-tabbar
      v-model="active"
      active-color="#464646"
      inactive-color="#b7b9bb"
      class="tabbar"
      :route="true"
      v-if="tabbarShow"
    >
      <van-tabbar-item to="/" :replace="true"
        ><template #icon="{active:isActive}">
          <img v-if="!isActive" src="@/assets/images/ic_home_uns.png" alt="" />
          <img v-else src="@/assets/images/ic_home_s.png" alt="" /> </template
        >首页</van-tabbar-item
      >
      <!-- <van-tabbar-item icon="search" to="/service" :replace="true"
        ><template #icon="{active:isActive}">
          <img
            v-if="!isActive"
            src="@/assets/images/ic_member_uns.png"
            alt=""
          />
          <img v-else src="@/assets/images/ic_member_s.png" alt="" /> </template
        >专享服务</van-tabbar-item
      > -->
      <van-tabbar-item icon="search" url="https://ykf-webchat.7moor.com/wapchat.html?accessId=1cb1fb90-3ab5-11eb-b9a7-c7d93f891c90&fromUrl=&urlTitle=&language=ZHCN" :replace="true"
        ><template #icon="{active:isActive}">
          <img
            v-if="!isActive"
            src="@/assets/images/ic_member_uns.png"
            alt=""
          />
          <img v-else src="@/assets/images/ic_member_s.png" alt="" /> </template
        >在线服务</van-tabbar-item
      >

      <van-tabbar-item icon="setting-o" to="/personal" :replace="true"
        ><template #icon="{active:isActive}">
          <img
            v-if="!isActive"
            src="@/assets/images/ic_home_mine_uns.png"
            alt=""
          />
          <img
            v-else
            src="@/assets/images/ic_home_mine_s.png"
            alt=""
          /> </template
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<style lang="less">
#app {
  height: 100%;
}
</style>
<script>
import { settingInfo } from '@/api/index'
import { mapState } from 'vuex'
import router from '@/router'
export default {
  data() {
    return {
      active: 0,
      keepAlive: [],
      info: null
    }
  },
  mounted() {
    if (this.$store.state.user.token || localStorage.getItem('token')) {
      this.$nextTick(async () => {
        this.info = await settingInfo()
        let Element = document.createElement('div')
        Element.innerHTML = this.info.report
        document.body.append(Element)
      })
    }

    const routers = [...router.options.routes]
    for (let i = 0; i < routers.length; i++) {
      if (routers[i] && routers[i].meta && routers[i].meta.keep) {
        this.keepAlive.push(routers[i].name)
      }
    }
  },
  computed: {
    ...mapState({
      tabbarShow: state => state.config.tabbarShow
    }),
    key() {
      return this.$router.path
    }
  },
  watch: {
    path() {}
  }
}
</script>
